import { createStore, combineReducers, applyMiddleware } from 'redux';
import * as rootReducer from './root/reducer';
import { robotList } from './robot';
import { intentionList } from './intention';
import { questionList } from './question';
import thunk from 'redux-thunk'; // 用来在action里面支持异步
import { persistStore, persistReducer } from 'redux-persist'; // 持久化，用来避免刷新导致store重置
import storage from 'redux-persist/lib/storage';
import { composeWithDevTools } from 'redux-devtools-extension';
import logger from 'redux-logger';

// 说明：如果你以前使用 Flux，那么你只需要注意一个重要的区别。Redux 没有 Dispatcher 且不支持多个 store。相反，只有一个单一的 store 和一个根级的 reduce 函数reducing function。随着应用不断变大，你应该把根级的 reducer 拆成多个小的 reducers，分别独立地操作 state 树的不同部分，而不是添加新的 stores。然后你可以使用 combineReducers 来连接他们。这就像一个 React 应用只有一个根级的组件，这个根组件又由很多小组件构成。

const myReducer = persistReducer(
  {
    key: 'page', // key是放入localStorage中的key
    storage, // storage简单就可以理解成localStorage的功能封装吧
  },
  combineReducers({
    ...rootReducer,
    robotList,
    intentionList,
    questionList,
  })
);

let middlewares;
/** 如果环境是生产环境，就只保留中间件 否则保留redux调试工具。在开发者模式下开启打印日志功能**/
if (process.env.NODE_ENV === `development`) {
  middlewares = composeWithDevTools(applyMiddleware(thunk, logger)); //redux 日志打印
} else {
  middlewares = applyMiddleware(thunk);
}
const store = createStore(myReducer, middlewares);
export const persistor = persistStore(store);
export default store;
